import { Button, Image, Popconfirm, Table } from "antd"
/**
 * 直播数据记录表格
 */

import React from "react"

import { useStorage } from "@plasmohq/storage/hook"

const { Column } = Table

interface LiveDataType {
  anchor_name: string
  anchor_real_name: string
  averageWatchTime: number
  classId: number
  classs: number
  created_time: string
  creator: number
  creatorId: number
  creator_name: string
  id: number
  img: string
  liveStartTime: string
  liveTime: number
  live_addfensi: number
  live_duration: number
  live_img: string
  live_img_thumbnail: string
  live_imglist: string
  live_pv: number
  live_start_time: string
  live_end_time: string
  live_uv: number
  live_viewtime: number
  newFansCount: number
  play: number
  playId: number
  prefix: number
  prefixId: number
  prefix_name: string
  pv: number
  record_time: string
  shipper_name: string
  uv: number
  class_tag: number
  is_mix: boolean
}

// 数据表组件参数
type DataRecordTableProps = {
  tableData: LiveDataType[]
}

const DataRecordTable: React.FC<DataRecordTableProps> = ({ tableData }) => {
  // 删除记录id storage
  const [deleteRecordId, setDeleteRecordId] = useStorage("deleteRecordId", 0)
  // 删除记录
  const handleDelete = async (id: number) => {
    // 设置删除记录id，组件DataRecordModalTools会监听该值变化,触发删除操作
    await setDeleteRecordId(id)
  }
  return (
    <div className="data-record-table">
      <Table
        bordered={true}
        rowKey={"id"}
        dataSource={tableData}
        size={"small"}
        pagination={false}
        scroll={{ y: 350 }}
        className={"live-data-table"}>
        <Column
          align={"center"}
          title={"#"}
          key={"index"}
          render={(text, record, index) => {
            return index + 1
          }}
          width={50}
        />
        <Column
          align={"center"}
          title={"主播"}
          key={"anchor_name"}
          width={130}
          render={(text, record: LiveDataType) => {
            return `${record.anchor_name}(${record.class_tag})`
          }}
        />
        <Column
          align={"center"}
          title={"货主"}
          dataIndex={"shipper_name"}
          key={"shipper_name"}
          width={130}
        />
        <Column
          align={"center"}
          title={"T"}
          dataIndex={"is_mix"}
          key={"is_mix"}
          width={30}
          render={(text, record: LiveDataType) => {
            return record.is_mix ? "混" : ""
          }}
        />
        <Column
          align={"center"}
          title={"下播"}
          dataIndex={"live_end_time"}
          key={"live_end_time"}
          width={40}
          render={(text, record: LiveDataType) => {
            return record.live_end_time ? "✓" : ""
          }}
        />
        <Column
          align={"center"}
          title={"开播时间"}
          dataIndex={"live_start_time"}
          key={"live_start_time"}
          width={100}
        />
        <Column
          align={"center"}
          title={"记录时间"}
          dataIndex={"live_record_time"}
          key={"live_record_time"}
          width={100}
        />
        <Column
          align={"center"}
          title={"成交金额"}
          dataIndex={"live_sale_amount"}
          key={"live_sale_amount"}
          width={80}
        />
        <Column
          align={"center"}
          title={"PV"}
          dataIndex={"pv"}
          key={"pv"}
          width={80}
        />
        <Column
          align={"center"}
          title={"UV"}
          dataIndex={"uv"}
          key={"uv"}
          width={80}
        />
        <Column
          align={"center"}
          title={"人均时长"}
          dataIndex={"averageWatchTime"}
          key={"averageWatchTime"}
          render={(text, record: LiveDataType) => {
            return record.averageWatchTime ? `${record.averageWatchTime}秒` : ""
          }}
          width={80}
        />
        <Column
          align={"center"}
          title={"成交人数"}
          dataIndex={"live_sale_count"}
          key={"live_sale_count"}
          width={80}
        />
        <Column
          align={"center"}
          title={"新增粉丝"}
          dataIndex={"newFansCount"}
          key={"newFansCount"}
          width={80}
        />
        <Column
          align={"center"}
          title={"记录截图"}
          dataIndex={"uv"}
          key={"images"}
          render={(text, record: LiveDataType) => {
            const images = record.live_img_thumbnail
            // 如果images为空，返回空
            if (!images) {
              return ""
            } else {
              // 如果images为字符串，返回图片
              if (typeof images === "string") {
                return (
                  <Image
                    width={30}
                    src={record.live_img_thumbnail}
                    preview={false}
                  />
                )
              } else if (Array.isArray(images)) {
                // 返回图片数组
                return (images as string[]).map((image, index) => {
                  return (
                    <Image key={index} width={30} src={image} preview={false} />
                  )
                })
              }
              return (
                <Image
                  width={30}
                  src={record.live_img_thumbnail}
                  preview={false}
                />
              )
            }
          }}
          width={150}
        />
        {/*<Column*/}
        {/*  align={"center"}*/}
        {/*  title={"操作"}*/}
        {/*  key={"control"}*/}
        {/*  render={(text, record: LiveDataType) => {*/}
        {/*    return (*/}
        {/*      <Popconfirm*/}
        {/*        title="删除数据"*/}
        {/*        description={`是否确认删除记录时间[${record.created_time}]的数据？`}*/}
        {/*        onConfirm={() => handleDelete(record.id)}*/}
        {/*        getPopupContainer={(triggerNode) =>*/}
        {/*          triggerNode.parentElement.parentElement.parentElement*/}
        {/*            .parentElement.parentElement*/}
        {/*        }*/}
        {/*        okText="是"*/}
        {/*        cancelText="否">*/}
        {/*        <Button type={"text"} danger>*/}
        {/*          删除*/}
        {/*        </Button>*/}
        {/*      </Popconfirm>*/}
        {/*    )*/}
        {/*  }}*/}
        {/*  width={80}*/}
        {/*/>*/}
      </Table>
    </div>
  )
}

export default DataRecordTable
